<template>
  <a-modal
    width="700px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <modalTitle @close="modalShow = false" :title="'小区详情'"></modalTitle>
    </template>
    <div style="padding: 0 10px 10px 10px">
      <mTable :titleData="titleData" :valueData="valueData" @click-btn="rowClick"></mTable>
      <!-- <modalPage :total="500"></modalPage> -->
    </div>
  </a-modal>
</template>
<script setup>
import $api from "@/utils/request.js"
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
import mTable from "../mTable.vue"
import modalPage from "../modalPage.vue"

const modalShow = ref(false)
const titleData = [
  {
    name: "小区名称",
    key: "name",
    style: {
      width: "80px"
    }
  },
  {
    name: "物业公司",
    key: "wuye",
    style: {
      flex: 1
    }
  },
  {
    name: "物业联系人",
    key: "contact",
    style: {
      width: "70px"
    }
  },
  {
    name: "联系电话",
    key: "contact_mobile",
    style: {
      width: "70px"
    }
  },
  {
    name: "建成日期",
    key: "complete_time",
    style: {
      width: "70px"
    }
  },
  {
    name: "入住户数",
    key: "rzhs",
    style: {
      width: "60px"
    }
  },
  {
    name: "楼栋数",
    key: "ld_num",
    style: {
      width: "50px"
    }
  },
  {
    name: "面积",
    key: "area",
    style: {
      width: "60px"
    }
  },
  {
    name: "入住人口",
    key: "rzrk",
    style: {
      width: "60px"
    }
  }
]
const valueData = ref([])

const close = () => {
  modalShow.value = false
}
const show = (e) => {
  getData()
  modalShow.value = true
}

const getData = async () => {
  const res = await $api.get("/api/index/getHouseList")
  if (res.code === 1) {
    res.data.forEach((e) => {
      res.data.createtime = formateDate(e.createtime)
    })
    valueData.value = res.data
  }
}
const formateDate = (timestamp) => {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, "0")
  const day = String(date.getDate()).padStart(2, "0")
  return `${year}-${month}-${day}`
}

defineExpose({ show, close })
</script>
